var Charts = function () {

    return {
        //main function to initiate the module

        init: function () {

            App.addResponsiveHandler(function () {
                 Charts.initPieCharts(); 
            });
            
        },

        initCharts: function () {

            if (!jQuery.plot) {
                return;
            }

            var data = [];
            var totalPoints = 250;

            // random data generator for plot charts

            function getRandomData() {
                if (data.length > 0) data = data.slice(1);
                // do a random walk
                while (data.length < totalPoints) {
                    var prev = data.length > 0 ? data[data.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;
                    if (y < 0) y = 0;
                    if (y > 100) y = 100;
                    data.push(y);
                }
                // zip the generated y values with the x values
                var res = [];
                for (var i = 0; i < data.length; ++i) res.push([i, data[i]])
                return res;
            }

            //Basic Chart

            // function chart1() {
            //     var d1 = [];
            //     for (var i = 0; i < Math.PI * 2; i += 0.25)
            //         d1.push([i, Math.sin(i)]);

            //     var d2 = [];
            //     for (var i = 0; i < Math.PI * 2; i += 0.25)
            //         d2.push([i, Math.cos(i)]);

            //     var d3 = [];
            //     for (var i = 0; i < Math.PI * 2; i += 0.1)
            //         d3.push([i, Math.tan(i)]);

            //     $.plot($("#chart_1"), [{
            //                 label: "sin(x)",
            //                 data: d1
            //             }, {
            //                 label: "cos(x)",
            //                 data: d2
            //             }, {
            //                 label: "tan(x)",
            //                 data: d3
            //             }
            //         ], {
            //             series: {
            //                 lines: {
            //                     show: true
            //                 },
            //                 points: {
            //                     show: true
            //                 }
            //             },
            //             xaxis: {
            //                 ticks: [0, [Math.PI / 2, "\u03c0/2"],
            //                     [Math.PI, "\u03c0"],
            //                     [Math.PI * 3 / 2, "3\u03c0/2"],
            //                     [Math.PI * 2, "2\u03c0"]
            //                 ]
            //             },
            //             yaxis: {
            //                 ticks: 10,
            //                 min: -2,
            //                 max: 2
            //             },
            //             grid: {
            //                 backgroundColor: {
            //                     colors: ["#fff", "#eee"]
            //                 }
            //             }
            //         });

            // }

            //Interactive Chart

            function chart2() {

                var pageviews = window.xyaxis;
                // var visitors = [
                //     [1, randValue() - 5],
                //     [2, randValue() - 5],
                //     [3, randValue() - 5],
                //     [4, 6 + randValue()],
                //     [5, 5 + randValue()],
                //     [6, 20 + randValue()],
                //     [7, 25 + randValue()],
                //     [8, 36 + randValue()],
                //     [9, 26 + randValue()],
                //     [10, 38 + randValue()],
                //     [11, 39 + randValue()],
                //     [12, 50 + randValue()],
                //     [13, 51 + randValue()],
                //     [14, 12 + randValue()],
                //     [15, 13 + randValue()],
                //     [16, 14 + randValue()],
                //     [17, 15 + randValue()],
                //     [18, 15 + randValue()],
                //     [19, 16 + randValue()],
                //     [20, 17 + randValue()],
                //     [21, 18 + randValue()],
                //     [22, 19 + randValue()],
                //     [23, 20 + randValue()],
                //     [24, 21 + randValue()],
                //     [25, 14 + randValue()],
                //     [26, 24 + randValue()],
                //     [27, 25 + randValue()],
                //     [28, 26 + randValue()],
                //     [29, 27 + randValue()],
                //     [30, 31 + randValue()]
                // ];
function getT(beforedays){
    var bfd = beforedays || 0;
    var od = new Date();
    od.y = od.getFullYear();
    od.m = od.getMonth() + 1;
    od.d = od.getDate() - bfd;
    return od.y+'年'+od.m+'月'+od.d+'日';
}
                var plot = $.plot($("#chart_2"), [{
                            data: pageviews,
                            label: "推送量"
                        }
                        // , {
                        //     data: visitors,
                        //     label: "Page Views"
                        // }
                    ], {
                        series: {
                            lines: {
                                show: true,
                                lineWidth: 2,
                                fill: true,
                                fillColor: {
                                    colors: [{
                                            opacity: 0.05
                                        }, {
                                            opacity: 0.01
                                        }
                                    ]
                                }
                            },
                            points: {
                                show: true
                            },
                            shadowSize: 2
                        },
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#eee",
                            borderWidth: 0
                        },
                        colors: ["#d12610", "#37b7f3", "#52e136"],
                        xaxis: {
                            show: true,
                            tickDecimals: 0,
                            ticks: [[1, getT(6)], [2, getT(5)], [3, getT(4)], [4, getT(3)], [5, getT(2)], [6, getT(1)], [7, getT(0)]]
                        },
                        yaxis: {
                            show: true,
                            ticks: 16,
                            tickDecimals: 0
                        }
                    });


                function showTooltip(x, y, contents) {
                    $('<div id="tooltip">' + contents + '</div>').css({
                            position: 'absolute',
                            display: 'none',
                            top: y + 5,
                            left: x + 15,
                            border: '1px solid #333',
                            padding: '4px',
                            color: '#fff',
                            'border-radius': '3px',
                            'background-color': '#333',
                            opacity: 0.80
                        }).appendTo("body").fadeIn(200);
                }

                var previousPoint = null;
                $("#chart_2").bind("plothover", function (event, pos, item) {
                    $("#x").text(pos.x.toFixed(2));
                    $("#y").text(pos.y.toFixed(2));

                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $("#tooltip").remove();
                            var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);

                            showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
                        }
                    } else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                });
            }

            //Tracking Curves

            // function chart3() {
            //     //tracking curves:

            //     var sin = [],
            //         cos = [];
            //     for (var i = 0; i < 14; i += 0.1) {
            //         sin.push([i, Math.sin(i)]);
            //         cos.push([i, Math.cos(i)]);
            //     }

            //     plot = $.plot($("#chart_3"), [{
            //                 data: sin,
            //                 label: "sin(x) = -0.00"
            //             }, {
            //                 data: cos,
            //                 label: "cos(x) = -0.00"
            //             }
            //         ], {
            //             series: {
            //                 lines: {
            //                     show: true
            //                 }
            //             },
            //             crosshair: {
            //                 mode: "x"
            //             },
            //             grid: {
            //                 hoverable: true,
            //                 autoHighlight: false
            //             },
            //             yaxis: {
            //                 min: -1.2,
            //                 max: 1.2
            //             }
            //         });

            //     var legends = $("#chart_3 .legendLabel");
            //     legends.each(function () {
            //         // fix the widths so they don't jump around
            //         $(this).css('width', $(this).width());
            //     });

            //     var updateLegendTimeout = null;
            //     var latestPosition = null;

            //     function updateLegend() {
            //         updateLegendTimeout = null;

            //         var pos = latestPosition;

            //         var axes = plot.getAxes();
            //         if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;

            //         var i, j, dataset = plot.getData();
            //         for (i = 0; i < dataset.length; ++i) {
            //             var series = dataset[i];

            //             // find the nearest points, x-wise
            //             for (j = 0; j < series.data.length; ++j)
            //                 if (series.data[j][0] > pos.x) break;

            //                 // now interpolate
            //             var y, p1 = series.data[j - 1],
            //                 p2 = series.data[j];
            //             if (p1 == null) y = p2[1];
            //             else if (p2 == null) y = p1[1];
            //             else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);

            //             legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
            //         }
            //     }

            //     $("#chart_3").bind("plothover", function (event, pos, item) {
            //         latestPosition = pos;
            //         if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
            //     });
            // }

            //Dynamic Chart

            // function chart4() {
            //     //server load
            //     var options = {
            //         series: {
            //             shadowSize: 1
            //         },
            //         lines: {
            //             show: true,
            //             lineWidth: 0.5,
            //             fill: true,
            //             fillColor: {
            //                 colors: [{
            //                         opacity: 0.1
            //                     }, {
            //                         opacity: 1
            //                     }
            //                 ]
            //             }
            //         },
            //         yaxis: {
            //             min: 0,
            //             max: 100,
            //             tickFormatter: function (v) {
            //                 return v + "%";
            //             }
            //         },
            //         xaxis: {
            //             show: false
            //         },
            //         colors: ["#6ef146"],
            //         grid: {
            //             tickColor: "#a8a3a3",
            //             borderWidth: 0
            //         }
            //     };

            //     var updateInterval = 30;
            //     var plot = $.plot($("#chart_4"), [getRandomData()], options);

            //     function update() {
            //         plot.setData([getRandomData()]);
            //         plot.draw();
            //         setTimeout(update, updateInterval);
            //     }
            //     update();
            // }

            //bars with controls

            // function chart5() {
            //     var d1 = [];
            //     for (var i = 0; i <= 10; i += 1)
            //         d1.push([i, parseInt(Math.random() * 30)]);

            //     var d2 = [];
            //     for (var i = 0; i <= 10; i += 1)
            //         d2.push([i, parseInt(Math.random() * 30)]);

            //     var d3 = [];
            //     for (var i = 0; i <= 10; i += 1)
            //         d3.push([i, parseInt(Math.random() * 30)]);

            //     var stack = 0,
            //         bars = true,
            //         lines = false,
            //         steps = false;

            //     function plotWithOptions() {
            //         $.plot($("#chart_5"), [d1, d2, d3], {
            //                 series: {
            //                     stack: stack,
            //                     lines: {
            //                         show: lines,
            //                         fill: true,
            //                         steps: steps
            //                     },
            //                     bars: {
            //                         show: bars,
            //                         barWidth: 0.6
            //                     }
            //                 }
            //             });
            //     }

            //     $(".stackControls input").click(function (e) {
            //         e.preventDefault();
            //         stack = $(this).val() == "With stacking" ? true : null;
            //         plotWithOptions();
            //     });
            //     $(".graphControls input").click(function (e) {
            //         e.preventDefault();
            //         bars = $(this).val().indexOf("Bars") != -1;
            //         lines = $(this).val().indexOf("Lines") != -1;
            //         steps = $(this).val().indexOf("steps") != -1;
            //         plotWithOptions();
            //     });

            //     plotWithOptions();
            // }

            //graph
            // chart1();
            chart2();
            // chart3();
            // chart4();
            // chart5();

        },

        initPieCharts: function () {

            var data = [];
            var series = Math.floor(Math.random() * 10) + 1;
            series = series < 5 ? 5 : series;
            
            for (var i = 0; i < series; i++) {
                data[i] = {
                    label: "Series" + (i + 1),
                    data: Math.floor(Math.random() * 100) + 1
                }
            }

            // // DEFAULT
            // $.plot($("#pie_chart"), data, {
            //         series: {
            //             pie: {
            //                 show: true
            //             }
            //         }
            //     });

            // // GRAPH 1
            // $.plot($("#pie_chart_1"), data, {
            //         series: {
            //             pie: {
            //                 show: true
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 2
            // $.plot($("#pie_chart_2"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 1,
            //                 label: {
            //                     show: true,
            //                     radius: 1,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     background: {
            //                         opacity: 0.8
            //                     }
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 3
            // $.plot($("#pie_chart_3"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 1,
            //                 label: {
            //                     show: true,
            //                     radius: 3 / 4,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     background: {
            //                         opacity: 0.5
            //                     }
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 4
            // $.plot($("#pie_chart_4"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 1,
            //                 label: {
            //                     show: true,
            //                     radius: 3 / 4,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     background: {
            //                         opacity: 0.5,
            //                         color: '#000'
            //                     }
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 5
            // $.plot($("#pie_chart_5"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 3 / 4,
            //                 label: {
            //                     show: true,
            //                     radius: 3 / 4,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     background: {
            //                         opacity: 0.5,
            //                         color: '#000'
            //                     }
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 6
            // $.plot($("#pie_chart_6"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 1,
            //                 label: {
            //                     show: true,
            //                     radius: 2 / 3,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     threshold: 0.1
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 7
            // $.plot($("#pie_chart_7"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 combine: {
            //                     color: '#999',
            //                     threshold: 0.1
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 8
            // $.plot($("#pie_chart_8"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 300,
            //                 label: {
            //                     show: true,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     threshold: 0.1
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // GRAPH 9
            // $.plot($("#pie_chart_9"), data, {
            //         series: {
            //             pie: {
            //                 show: true,
            //                 radius: 1,
            //                 tilt: 0.5,
            //                 label: {
            //                     show: true,
            //                     radius: 1,
            //                     formatter: function (label, series) {
            //                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
            //                     },
            //                     background: {
            //                         opacity: 0.8
            //                     }
            //                 },
            //                 combine: {
            //                     color: '#999',
            //                     threshold: 0.1
            //                 }
            //             }
            //         },
            //         legend: {
            //             show: false
            //         }
            //     });

            // // DONUT
            // $.plot($("#donut"), data, {
            //         series: {
            //             pie: {
            //                 innerRadius: 0.5,
            //                 show: true
            //             }
            //         }
            //     });

            // // INTERACTIVE
            // $.plot($("#interactive"), data, {
            //         series: {
            //             pie: {
            //                 show: true
            //             }
            //         },
            //         grid: {
            //             hoverable: true,
            //             clickable: true
            //         }
            //     });
            // $("#interactive").bind("plothover", pieHover);
            // $("#interactive").bind("plotclick", pieClick);

            function pieHover(event, pos, obj) {
            if (!obj)
                    return;
                percent = parseFloat(obj.series.percent).toFixed(2);
                $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
            }

            function pieClick(event, pos, obj) {
                if (!obj)
                    return;
                percent = parseFloat(obj.series.percent).toFixed(2);
                alert('' + obj.series.label + ': ' + percent + '%');
            }

        }
        
    };

}();